<template>
    <div class="tabbar">
        <van-tabbar route v-model="active">
            <van-tabbar-item replace to="/markday">
                <template #icon>
                    <span class="iconfont icon-rili"></span>
                </template>
            </van-tabbar-item>

            <van-tabbar-item replace to="/menu">
                <template #icon>
                    <span class="iconfont icon-wj"></span>
                </template>
            </van-tabbar-item>

            <van-tabbar-item replace to="/history">
                <template #icon>
                    <span class="iconfont icon-xingqiu"></span>
                </template>
            </van-tabbar-item>

            <van-tabbar-item replace to="/home" icon="friends-o"></van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
export default {
    name: 'TabBar',
    data() {
        return {
            active: 0,
            
        };
    },
};
</script>

<style lang="scss" scoped>
@import '@/assets/iconfont/iconfont.css';

.tabbar{
    .iconfont {
        font-size: 24px;
    }
    .icon-xingqiu {
        font-size: 32px;
    }
}

</style>